<template>
  <div class="" style="height: 100%; width: 100%">
    <tongyongbasechart :options="options" ref="reffuhe" />
  </div>
</template>
<script>
import echarts from 'echarts'  //引入echarts
import 'echarts-liquidfill'

export default {
  name: "zjnchart25",
  components: {},
  data() {
    return {
      options: {},
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.gongreliangzhanbi": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    let scale = this.$root.setting.scale;

    let option = {};
    var value = 0.2;
    var data = [value, value, value];
    option = {
      // backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
      //   {
      //     offset: 0,
      //     color: "#431ab8",
      //   },
      //   {
      //     offset: 1,
      //     color: "#471bba",
      //   },
      // ]),
      title: {
        text: (value * 100).toFixed(0) + "{a|%}",
        textStyle: {
          fontSize: 50,
          fontFamily: "Microsoft Yahei",
          fontWeight: "normal",
          color: "#bcb8fb",
          rich: {
            a: {
              fontSize: 28,
            },
          },
        },
        x: "center",
        y: "35%",
      },
      graphic: [
        {
          type: "group",
          left: "center",
          top: "60%",
          children: [
            {
              type: "text",
              z: 100,
              left: "10",
              top: "middle",
              style: {
                fill: "#aab2fa",
                text: "年度完成情况",
                font: "20px Microsoft YaHei",
              },
            },
          ],
        },
      ],
      series: [
        {
          type: "liquidFill",
          radius: "80%",
          center: ["50%", "50%"],
          //  shape: 'roundRect',
          data: data,
          backgroundStyle: {
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              colorStops: [
                {
                  offset: 1,
                  color: "rgba(68, 145, 253, 0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(68, 145, 253, .25)",
                },
                {
                  offset: 0,
                  color: "rgba(68, 145, 253, 1)",
                },
              ],
              globalCoord: false,
            },
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 20,
              borderColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(69, 73, 240, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(69, 73, 240, .25)",
                  },
                  {
                    offset: 1,
                    color: "rgba(69, 73, 240, 1)",
                  },
                ],
                globalCoord: false,
              },
              shadowBlur: 10,
              shadowColor: "#000",
            },
          },
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(58, 71, 212, 0)",
              },
              {
                offset: 0.5,
                color: "rgba(31, 222, 225, .2)",
              },
              {
                offset: 0,
                color: "rgba(31, 222, 225, 1)",
              },
            ],
            globalCoord: false,
          },
          label: {
            normal: {
              formatter: "",
            },
          },
        },
      ],
    };

    this.options = option;
  },
  methods: {
    loadData(n) {
      let scale = this.$root.setting.scale;
      this.options.series[0].data = [];
      //m_012qc
      n.map((item) => {
        this.options.series[0].data.push({
          value: Number(Math.abs(Number(item["m_012qc"])) / 10000).toFixed(2),
          name: item.name,
        });
      });
      this.options.series[0].data.sort(function (a, b) {
        return a.value - b.value;
      }),
        this.$refs.reffuhe.myChart.setOption(this.options);
      // this.options
    },
  },
};
</script>
<style lang='scss' scoped>
</style>